<template>
    <div ref = "statsRef"></div>
    <div ref ="containerRef" class="container"></div>
</template>

<script setup lang="ts">
import * as THREE from "three";
import {onMounted, ref, render} from "vue";
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js';
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import Stats from 'stats.js';
import * as dat from 'dat.gui';
import { AnimationAction } from "three";

const stats = new Stats();
stats.showPanel(0)

const statsRef = ref<HTMLElement>();
const containerRef = ref<HTMLElement>();


// 创建场景
const scene = new THREE.Scene();
// 创建摄像机，并设置位置
const camera= new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight,0.1,1000);
camera.position.y=200;
camera.position.z=500;
// 设置摄像机朝向
camera.lookAt(scene.position)

// 创建渲染器
const renderer= new THREE.WebGLRenderer()
renderer.setClearColor(new THREE.Color(0xeeeeee))
renderer.setSize(window.innerWidth,window.innerHeight)
renderer.setAnimationLoop(renderScene)
renderer.shadowMap.enabled = true

// const controlRef = ref({
//     rotationSpeed : 0.02,
//     bouncingSpeed : 0.02,
//     numberOfObjects:scene.children.length,
//     addCube: function(){
//         const cubeGeom = new BoxGeometry(4,4,4)
//         const cubeMaterial = new MeshLambertMaterial({color:0xff0000,wireframe:false})
//         const cube = new Mesh(cubeGeom,cubeMaterial)
//         cube.name = "cube-" + scene.children.length
//         cube.castShadow = true

//         cube.position.x=-30+Math.round(Math.random()*60)
//         cube.position.y=Math.round(Math.random()*5)
//         cube.position.z=-20+Math.round(Math.random()*40)

//         scene.add(cube); 
//         this.numberOfObjects = scene.children.length
//     },
//     removeCube: function(){
//         const  allChildren = scene.children;
//         const lastChild = allChildren[allChildren.length-1];
//         if(lastChild instanceof Mesh && lastChild.name.startsWith("cube")){
//             scene.remove(lastChild)
//             this.numberOfObjects = scene.children.length
//         }
//     }
// }) 
// if(document.querySelectorAll(".dg.ac>.dg.main.a").length===0){
//     const gui = new dat.GUI();
//     // gui.add(controlRef.value,"addCube");
//     // gui.add(controlRef.value,"removeCube");
// }

const controls = new OrbitControls( camera, renderer.domElement );
const loader = new FBXLoader();
let actions: AnimationAction[]=[]
let mixer:THREE.AnimationMixer | null =  null;
loader.load('/Chicken Dance.fbx', function (mesh) {
    console.log("mesh",mesh)
    scene.add(mesh);
    mixer=new THREE.AnimationMixer(mesh);
    for ( let i=0; i <mesh.animations.length;i++){
        actions[i] = mixer.clipAction(mesh.animations[i]);
    }
    actions[0].play();
});

//环境光
const ambientLight = new THREE.AmbientLight(0x606060);
scene.add(ambientLight);
// 添加灯光
const directLight = new THREE.DirectionalLight(0xffffff);
directLight.position.set(-4, -3.7, 5).normalize();
scene.add(directLight);
const spotLight = new THREE.SpotLight(0xffffff);
spotLight.castShadow= true;
spotLight.position.set(-40,60,-10);
scene.add(spotLight)

onMounted(() => {
    
    // stats.dom.style.top="50px";
    // statsRef.value?.append(stats.dom)
    containerRef.value?.appendChild(renderer.domElement)
    renderer.render(scene,camera)
})

// 添加坐标轴
const axes = new THREE.AxesHelper(20)
scene.add(axes)

let clock = new THREE.Clock()
function renderScene() {
    if(mixer){
        mixer.update(clock.getDelta())
    }
    // stats.update();
    controls.update();
    requestAnimationFrame(renderScene)
    renderer.render(scene,camera)
}
renderScene()


window.addEventListener('resize',()=>{
    camera.aspect = window.innerWidth/window.innerHeight
    // 更新相机投影矩阵
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth,window.innerHeight)
},false)
</script>

<style scoped>
    .tab{
        width:100px
    }
</style>
